
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image, ScrollView, FlatList,TouchableOpacity } from 'react-native';
import { scaleSizeH, scaleSizeW, setSpText } from '../util/ScreenUtil.js';
import ReactBotton from "./Widget/ReactBotton";
import LinkText from "./Widget/LinkText";
import Icon from "../assets/fonts/iconfont.js";
import Actor from "./Widget/actorList.js";
import { BoxShadow } from 'react-native-shadow';
import MoviesSevices from '../services/movie';
import StartItem from "./Widget/starItem"
import { url } from '../util/'
export default MovieDetails =(props) => {
    const [movieData, setMovieData] = useState([]);
    getMovie = async (_id) => {
        let data = await MoviesSevices.GetMovieById(_id)
        await setMovieData(data)
    }
    let year
    if (movieData.upDate) {
        year = movieData.upDate.split("-")[0]
    }
    useEffect(() => {
        let _id = props.navigation.getParam("id")
        getMovie(_id)
    }, [])
    const SELECTED = "#fdad2b"
    const NO_SELECTED = "#e4e4e4"
    const [selectedname, setSelectedName] = useState("home");
    const [showpage, setShowpage] = useState(4);
    const [text, setText] = useState("展开");
    function goBackhandle(){
        props.navigation.goBack()
    }
    return (
        <View style={styles.container}>
            <View style={styles.header}>
            <TouchableOpacity onPress={goBackhandle} style={{width:scaleSizeW(117),justifyContent:"center",alignItems:'center'}}>
                <Image resizeMode="stretch"
                    style={{ width: scaleSizeW(40), height: scaleSizeH(40)}}
                    source={require("../resource/imgs/返回.png")} />
                    </TouchableOpacity>
                <Text style={styles.headerText}><Icon name="baomihua" size={setSpText(43)} color="#fff"></Icon>电影</Text>
                <Image resizeMode="stretch"
                    style={{ width: scaleSizeW(40), height: scaleSizeH(40), marginRight: scaleSizeW(36) }}
                    source={require("../resource/imgs/分享.png")} />
            </View>
            <ScrollView >
                <View style={{ ...styles.container, alignItems: "center" }}>
                    {/* 头部 */}

                    {/* ---------内容部分--------- */}

                    <View style={styles.contentbg}>
                        <Image resizeMode="stretch"
                            style={{ width: scaleSizeW(356), height: scaleSizeH(507) }}
                            source={{ uri: url + movieData.poster }} />
                    </View>
                    {/* ---------电影名和起文字信息--------- */}
                    <View style={styles.ContentTitle}>
                        <View style={styles.movieitem}>
                            <Text style={{ fontWeight: "bold", fontSize: setSpText(44), marginBottom: scaleSizeH(40) }}>{movieData.cname}</Text>
                            <Text style={{ ...styles.fontColor }}>{year}/ {movieData.type}</Text>
                            <Text style={{ ...styles.fontColor }}>原名：{movieData.ename}</Text>
                            <Text style={{ ...styles.fontColor }}>上映时间：{movieData.upDate}({movieData.area})</Text>
                            <Text style={{ ...styles.fontColor }}>片长：130分钟</Text>
                        </View>
                        <BoxShadow setting={{
                            width: scaleSizeH(175),
                            height: scaleSizeH(175),
                            color: '#e3e3e0',
                            border: 10,
                            x: 1,
                            y: 1,
                            style: { marginVertical: 5, marginRight: scaleSizeW(40) }
                        }} >
                            <View style={styles.score}>
                                <Text style={{ fontSize: setSpText(18), color: "#d2d2d2" }}>豆瓣评分</Text>
                                <Text style={{ fontSize: setSpText(36), fontWeight: "bold" }}>{movieData.score}</Text>
                                <StartItem number={movieData.score}></StartItem>
                                <Text style={{ fontSize: setSpText(18), color: "#999" }}>{movieData.number?movieData.number:16800}人</Text>
                            </View>
                        </BoxShadow>
                    </View>
                    {/* -----------------按钮组件--------------------------- */}
                    <View style={{
                        flexDirection: "row",
                        width: scaleSizeW(667),
                        marginTop: scaleSizeH(48),
                        marginBottom: scaleSizeH(63),
                        justifyContent: "space-between"
                    }}>
                        <ReactBotton
                            buttonStyle={styles.RbuttonStyle}
                            buttonText={styles.buttonText}
                        >想看</ReactBotton>
                        <ReactBotton
                            buttonStyle={styles.LbuttonStyle}
                            buttonText={styles.buttonText}
                        >看过
                            <Icon name="xingxingxianmiao" color="#feaf29" size={setSpText(30)}></Icon>
                            <Icon name="xingxingxianmiao" color="#feaf29" size={setSpText(30)}></Icon>
                            <Icon name="xingxingxianmiao" color="#feaf29" size={setSpText(30)}></Icon>
                            <Icon name="xingxingxianmiao" color="#feaf29" size={setSpText(30)}></Icon>
                            <Icon name="xingxingxianmiao" color="#feaf29" size={setSpText(30)}></Icon>
                        </ReactBotton>
                    </View>
                    {/* ---------选座购票--------- */}
                    <View style={styles.buymovie}>
                        <Icon name="goupiao" color="#979797" size={setSpText(40)} style={{ marginLeft: scaleSizeW(50), marginRight: scaleSizeW(30) }}></Icon>
                        <Text style={{ flexGrow: 1, color: "#414141", fontWeight: "bold" }}>选座购票</Text>
                        <Icon name="arrow-right-copy-copy" color="#979797" size={setSpText(40)} style={{ marginRight: scaleSizeW(40) }}></Icon>
                    </View>
                    {/* ---------电影简介-------- */}
                    <View style={styles.Introduction}>
                        <Text style={{ color: "#b2b1b1", fontSize: setSpText(26), marginBottom: scaleSizeH(30) }}>简介</Text>
                        <View style={{
                            height: scaleSizeH(180),
                            position: "relative"
                        }}>
                            <Text
                                numberOfLines={showpage}
                                style={{ fontSize: setSpText(30) }}>
                                {movieData.intro}
                            </Text>
                            <LinkText linktext={styles.linktext} onPressText={onPressOpen}>{text}</LinkText>
                        </View>
                    </View>
                    {/* ==================演员，导演介绍 ================*/}
                    <View style={{
                        width: scaleSizeW(653),
                        height: scaleSizeH(355),
                        marginTop: scaleSizeH(65)
                    }}>
                        <Text style={{ color: "#b2b1b1", fontSize: setSpText(26) }}>影人</Text>
                        <FlatList
                            data={
                                [
                                    {
                                        director: "珍妮弗·李",
                                    },
                                    {
                                        actor: "克里斯汀·贝尔",
                                        roles: "饰安娜Anna",
                                    },
                                    {
                                        actor: "伊迪娜·门泽尔",
                                        roles: "饰艾尔莎Elsa",
                                    },
                                    {
                                        actor: "乔什·加德",
                                        roles: "饰：奥洛夫 Olaf",
                                    },
                                ]
                            }
                            showsHorizontalScrollIndicator={false}
                            horizontal={true}
                            keyExtractor={(item, index) => index}
                            renderItem={({ item, index }) =>
                                <Actor
                                    actorViewstyle={styles.actorViewstyle}
                                    actorImgStyle={styles.actorImgStyle}
                                    name={index == 0 ? item.director : item.actor}
                                    roles={index == 0 ? "导演" : item.roles}
                                ></Actor>}
                        />

                    </View>
                    {/* =========================预告片/剧照 ======================*/}
                    <View style={{
                        width: scaleSizeW(653),
                        height: scaleSizeH(400),
                        marginTop: scaleSizeH(65)
                    }}>
                        <Text style={{ color: "#b2b1b1", fontSize: setSpText(26), marginBottom: scaleSizeH(25) }}>剧照 /预告片</Text>
                        <FlatList
                            data={
                                [
                                    {
                                        images: "../resource/imgs/jq1.png",
                                    },
                                    {
                                        images: "../resource/imgs/jq2.png"
                                    },
                                    {
                                        images: "../resource/imgs/jq3.png"
                                    },
                                    {
                                        images: "../resource/imgs/jq4.png"
                                    },
                                ]
                            }
                            showsHorizontalScrollIndicator={false}
                            horizontal={true}
                            keyExtractor={(item, index) => index + ""}
                            renderItem={({ item }) =>
                                <Image resizeMode="stretch"
                                    style={{ width: scaleSizeW(390), height: scaleSizeH(291), marginRight: scaleSizeW(10) }}
                                    source={require("../resource/imgs/jq1.png")} ></Image>
                            }
                        />
                    </View>
                </View>
                {/* ======================评论区 ===================================*/}

                <View style={{ height: scaleSizeH(100), backgroundColor: "#f2f0ec", marginTop: scaleSizeH(65), flexDirection: "row" }}>
                    <View style={{ width: scaleSizeW(750 / 2), justifyContent: "center", alignItems: "center" }}>
                        <Text>评论</Text>
                    </View>
                    <View style={{ width: scaleSizeW(750 / 2), justifyContent: "center", alignItems: "center" }}>
                        <Text style={{ color: "#aeaeae" }}>讨论区</Text>
                    </View>
                </View>
                {/* ============================短评============================= */}
                <View style={{ marginTop: scaleSizeH(60), alignItems: "center", width: scaleSizeW(750), marginBottom: scaleSizeH(300), }}>
                    <View style={{ flexDirection: "row", height: scaleSizeH(50), width: scaleSizeW(667), justifyContent: "space-between" }}>
                        <Text>短评</Text>
                        <ReactBotton
                            buttonStyle={{ width: scaleSizeW(108), height: scaleSizeH(48), borderColor: "#5bc96d", borderWidth: 1, backgroundColor: "#f9f7f3", }}
                            buttonText={{ fontSize: setSpText(22), color: "#5bc96d" }}
                        >写短评</ReactBotton>
                    </View>

                    <View style={styles.commentStlyle}>
                        <View style={{ flexDirection: "row", height: scaleSizeH(60), justifyContent: "space-between", alignItems: 'center', width: scaleSizeW(667) }}>
                            <View style={styles.userImgs}>
                            </View>
                            <View style={{ flexDirection: "row", height: scaleSizeH(60), flexGrow: 1, alignItems: 'center' }} >
                                <Text>壹安</Text>
                                <View style={{ flexDirection: "row", width: scaleSizeW(122), justifyContent: "space-between" }}>
                                    <Icon name="pingfenxingxing" size={setSpText(22)} color={SELECTED}></Icon>
                                    <Icon name="pingfenxingxing" size={setSpText(22)} color={SELECTED}></Icon>
                                    <Icon name="pingfenxingxing" size={setSpText(22)} color={SELECTED}></Icon>
                                    <Icon name="pingfenxingxing" size={setSpText(22)} color={SELECTED}></Icon>
                                    <Icon name="pingfenxingxing" size={setSpText(22)} color={SELECTED} ></Icon>
                                </View>

                            </View>
                            <Text style={{ color: "#e4e5e2" }}> <Icon name="dianzan" size={setSpText(30)} ></Icon>&ensp;5038</Text>
                        </View>
                        <View style={{ width: scaleSizeW(567), marginLeft: scaleSizeW(70) }}>
                            <Text>既保留了原版最扣人心弦的部分：缜密的故事设计和离奇曲折的各种反转桥段，也做出了属于自己风格特色的改变，情节紧凑，节奏干净利落，尤其是演员的表演，无论是肖央，还是谭卓、陈冲，都让人惊喜。当然，给我查他一年观影记录台词一出，影厅直接笑场，太豆瓣了吧，哈哈哈哈。PS：估计很多人并不知道，《误杀瞒天记》也是翻拍，翻拍自2013年一部名为《较量》的印度电影，只不过比《较量》名气更大而已。</Text>
                            <Text style={{ marginTop: scaleSizeH(24), fontSize: setSpText(22), color: "#c7c7c7" }}>9月24日</Text>
                        </View>
                    </View>
                </View>
            </ScrollView>
        </View>
    );

    function onPressOpen() {
        setShowpage(0)
        setText("")
    }
}
const styles = StyleSheet.create(
    {
        fontColor: {
            color: "#a7a5a3",
            fontSize: setSpText(20)
        },
        container: {
            flex: 1,
            width: scaleSizeW(750),
            backgroundColor: "#f9f7f3",
            position: "relative"
        },
        header: {
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
            width: scaleSizeW(750),
            height: scaleSizeH(112),
            backgroundColor: "#4c4744",
            position: "absolute",
            top: 0,
            zIndex: 1
        },
        headerText: {
            width: scaleSizeW(116),
            height: scaleSizeH(48),
            fontSize: setSpText(34),
            color: "#fffefe"
        },
        contentbg: {
            backgroundColor: "#4c4744",
            marginTop: scaleSizeH(112),
            width: scaleSizeW(750),
            height: scaleSizeH(577),
            justifyContent: "center",
            alignItems: 'center'
        },
        ContentTitle: {
            width: scaleSizeW(750),
            height: scaleSizeH(203),
            flexDirection: "row",
            marginTop: scaleSizeH(45),
            justifyContent: "space-between"
        },
        buymovie: {
            height: scaleSizeH(130),
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
            borderBottomWidth: 1,
            borderBottomColor: "#f0eeea",
            borderTopWidth: 1,
            borderTopColor: "#f0eeea",

        },
        score: {
            width: scaleSizeH(175),
            height: scaleSizeH(175),
            alignItems: "center",
            backgroundColor: "#fff",
            justifyContent: "center"

        },
        movieitem: {
            marginLeft: scaleSizeW(40),

        },
        RbuttonStyle: {
            backgroundColor: "#f9f7f3",
            width: scaleSizeW(214),
            height: scaleSizeH(84),
            borderWidth: 1,
            borderColor: "#f0c176"
        },
        buttonText: {
            fontSize: setSpText(28),
            fontWeight: "bold",
            color: "#fcaa2b"
        },
        LbuttonStyle: {
            backgroundColor: "#f9f7f3",
            height: scaleSizeH(84),
            width: scaleSizeW(434),
            borderWidth: 1,
            borderColor: "#f0c176"
        },
        Introduction: {
            width: scaleSizeW(653),
            height: scaleSizeH(243),
            marginTop: scaleSizeH(65)
        },
        linktext: {
            position: "absolute",
            bottom: 0,
            right: 0,
            color: "#39ba51",
            fontWeight: "bold",
            fontSize: setSpText(28),
        }
        , actorImgStyle: {
            width: scaleSizeW(167),
            height: scaleSizeH(234),
        }
        , actorViewstyle: {
            width: scaleSizeW(167),
            height: scaleSizeH(312),
            marginTop: scaleSizeH(26),
            marginRight: scaleSizeW(24)
        },
        commentStlyle: { height: scaleSizeH(390), width: scaleSizeW(750), marginTop: scaleSizeH(48), alignItems: "center" }
        , userImgs: { width: scaleSizeW(60), height: scaleSizeW(60), borderRadius: 50, backgroundColor: "red", marginRight: scaleSizeW(28) }
    }
)
